<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input id="c-checkplan_detial_list" readonly class="form-control" name="detial[checkplan_detial_list]" type="hidden" value="" >
    <div id="hiddenInputs"></div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">路线名称:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-checkplan" class="form-control" name="row[checkplan]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">路线设置:</label>
        <div class="col-xs-12 col-sm-8">
<!--            value="{$row.check_line|htmlentities}"-->
            <input id="c-check_line" readonly class="form-control" name="row[check_line]" type="hidden" value="" >
            <div id="sortableInput" class="col-xs-12 col-sm-12">
<!--                <span data-id="1" class="label label-info">111</span>-->
            </div>
            <div id="sortable">
                {foreach $locationInfo as $index=>$vo}
                <h3><span data-id="{$vo.id}" class="label label-info">{:__($vo.checkpoint)}</span></h3>
                {/foreach}
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-3">路线时间与人员排班:</label>
        <div class="col-xs-12 col-sm-9">
<!--            <input id="c-check_line" class="form-control" name="row[check_line]" type="text">-->
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12 col-sm-10 center-block float-none">
            <table id="table" class="table table-bordered table-hover table-nowrap text-center" width="100%">
                <thead>
                        <tr>
                            <td>巡检时间</td>
                            <td>巡检人员</td>
                            <td>操作</td>
                        </tr>
                </thead>
                <tbody>
                    <tr class="odd"><td class="button-column" colspan="3">
                        <div class="addData" style="text-align: center; line-height: 10px">
                            <input class="btn btn-primary" type="button" style="line-height: 10px" id="addDataModal" value="+" />
                        </div>
                    </td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">状态:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label for="row[status]"><input  name="row[status]" type="radio" value="1" checked > 正常</label>
                <label for="row[status]"><input  name="row[status]" type="radio" value="2"  > 禁用</label>
            </div>
        </div>
    </div>
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('Create_time')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <input id="c-create_time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[create_time]" type="text" value="{:date('Y-m-d H:i:s')}">-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('Update_time')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <input id="c-update_time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[update_time]" type="text" value="{:date('Y-m-d H:i:s')}">-->
<!--        </div>-->
<!--    </div>-->
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>

<!--    -->
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">路线时间与人员排班</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" class="form-control" id="setTime" >
                    <label for="startTime">开始时间</label>
                    <input type="time" class="form-control" id="startTime" placeholder="请选择开始时间">
                    <label for="endTime">结束时间</label>
                    <input type="time" class="form-control" id="endTime" placeholder="请选择结束时间">
                    <label>巡检人</label>
                    <select class="form-control" id="inputUser">
                        {foreach $userInfo as $index=>$vo}
                            <option value="{:__($vo.id)}">{:__($vo.nickname)}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="modalConfirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .float-none{
            float: none;
        }
        #sortable{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
        }
        #sortable h3{
            display: block;
            margin: 20px 10px;
            cursor: pointer;
        }
        #sortableInput{
            border: 1px solid #ccc;
            padding: 6px 5px;
            box-sizing: border-box;
            background: #f1f1f1;
            height: 66px;
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
        }
        #sortableInput span{
            margin: 0 5px;
            position: relative;
        }
        #sortableInput span .close{
            line-height: 10px;
            margin-left: 5px;
            margin-bottom: 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        var sortableList = [];
        var thisHtml = [];
        var inputVal = [];
        var operateType = 1;//1新增 2修改
        $(function() {
            $("#sortable h3 span").click(function (){
                var thisid = $(this).attr('data-id');
                var thistext = $(this).html();
                if(inputVal.indexOf(thisid) == -1){
                    thisHtml.push(`<span data-id="${thisid}" class="label label-info">${thistext}<p class="close" data-id="${thisid}">×</p></span>`)
                    inputVal.push(thisid)
                }
                $("#c-check_line").val(inputVal.join(','))
                $("#sortableInput").html(thisHtml.join(''));
            });
            $("#sortableInput").on('click','.close',function (){
                var thisid = $(this).attr('data-id');
                thisHtml = $.grep(thisHtml, function(value) {
                    return value.indexOf('data-id="'+ thisid +'"') === -1;
                });
                inputVal = $.grep(inputVal, function(value) {
                    return value !== thisid;
                });
                $("#c-check_line").val(inputVal.join(','))
                $("#sortableInput").html(thisHtml.join(''));
            })
            $("#table tbody").on('click','#addDataModal',function(){
                operateType = 1;
                $('#myModal').modal('toggle')
            })
            $("#modalConfirm").click(function(){
                var startTime = $("#startTime").val();
                var endTime = $("#endTime").val();
                var userid = $("#inputUser").val();
                var username = $("#inputUser").find('option:selected').html();
                if(startTime == ''){
                    Toastr.error("请选择开始时间。");
                    return;
                }
                if(endTime == ''){
                    Toastr.error("请选择结束时间。");
                    return;
                }
                if(operateType == 1){
                    var setTime = Math.round(Date.now() / 1000);
                    sortableList.push({startTime,endTime,userid,username,setTime});
                }else if(operateType == 2){
                    var setTime = $("#setTime").val();
                    for (var i=0;i<sortableList.length;i++){
                        if(sortableList[i].setTime == setTime){
                            sortableList[i].startTime = startTime;
                            sortableList[i].endTime = endTime;
                            sortableList[i].userid = userid;
                            sortableList[i].username = username;
                        }
                    }
                }
                console.log(sortableList)
                setData(sortableList)
                $('#myModal').modal('toggle');
            })
            $("#alertDanger").on('click','.close',function(){
                $("#alertDanger").alert('close');
            })
        });
        function setData(dataArr){
            var addHtml = '';
            var inputs = '';
            if(dataArr.length > 0){
                for(var ii=0;ii<dataArr.length;ii++){
                    addHtml+=`<tr class="odd">
                                <td class="button-column">${dataArr[ii].startTime}-${dataArr[ii].endTime}</td>
                                <td class="button-column">${dataArr[ii].username}</td>
                                <td class="button-column">
                                    <a style="width:80px;height:26px;line-height:20px;" class="label label-sm label-info" title="修改" href="javascript:void(0)" onClick="saveData({startTime:'${dataArr[ii].startTime}',endTime:'${dataArr[ii].endTime}',userid:${dataArr[ii].userid},username:'${dataArr[ii].username}',setTime:${dataArr[ii].setTime}})">修改</a>
                                    <a style="width:80px;height:26px;line-height:20px;background-color: rgb(252, 190, 121);" class="label label-sm label-info" title="删除" href="javascript:void(0)" onClick="if(confirm('确认删除该条信息？')){delData(${dataArr[ii].setTime})}">删除</a>
                                </td>
                            </tr>`;
                    inputs += `<input id="c-checkplan_detial_list" readonly class="form-control" name="checkplan_detial_list[]" type="hidden" value="${dataArr[ii]}" >`;
                }
            }
            addHtml += `<tr class="odd"><td class="button-column" colspan="3">
                        <div class="addData" style="text-align: center; line-height: 10px">
                            <input class="btn btn-primary" type="button" style="line-height: 10px" id="addDataModal" value="+" />
                        </div>
                    </td></tr>`
            $("#c-checkplan_detial_list").val(JSON.stringify(dataArr));
            // $("#hiddenInputs").html(inputs);
            $("#table tbody").html(addHtml);
        }
        //修改
        function saveData(data){
            $("#startTime").val(data.startTime);
            $("#endTime").val(data.endTime);
            $("#inputUser").val(data.userid);
            $("#setTime").val(data.setTime);
            operateType = 2;
            $('#myModal').modal('toggle');
        }

    //     删除
        function delData(setTime){
            sortableList = sortableList.filter(item => item.setTime !== setTime)
            setData(sortableList)
        }
    </script>
</form>
